<form nz-form #validateForm="ngForm" (ngSubmit)="submitForm()" nzLayout="horizontal" autocomplete="off">
  <!-- 模态框头部 -->
  <div class="modal-header">
    <div class="modal-title">
      <i class="iconfont icon-medicine-box mr-sm"></i>
      <span *ngIf="entity.id">{{l('Edit')}}</span>
      <span *ngIf="!entity.id">{{l('Create')}}</span>
    </div>
  </div>
  <!-- 模态框内容 -->
  <fieldset>
    <!-- 提示信息 -->
    <!-- <nz-alert nzType="info" nzCloseable [nzShowIcon]="true" nzMessage="l('我想提示点什么内容给你说')"></nz-alert> -->
    <!-- 书单名称 : ListName 的控件范围=Start= -->
    <nz-form-item nz-row>
      <nz-form-label nz-col [nzSm]="6" [nzXs]="24" nzRequired nzFor="listName">
        {{l('BookListListName')}}
      </nz-form-label>
      <nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
        <!--  控件位置 -->
        <input nz-input name="listName" #listName="ngModel" [(ngModel)]="entity.listName"
          [placeholder]="l('BookListListNameInputDesc')" required maxlength='50' minlength='1'>

        <!-- 校验 -->
        <nz-form-explain *ngIf="listName.control.dirty
                                                 &&listName.control.errors">
          <ng-container *ngIf="listName.control.hasError('maxlength')">{{l('MaxLength')+50}}</ng-container>
          <ng-container *ngIf="listName.control.hasError('minlength')">{{l('MinLength')+1}}</ng-container>
          <ng-container *ngIf="listName.control.hasError('required')">{{l('ThisFieldIsRequired')}}</ng-container>
        </nz-form-explain>

      </nz-form-control>

    </nz-form-item>
    <!--书单名称 : ListName 的控件范围结束=END= -->
    <!-- 简介 : Intro 的控件范围=Start= -->
    <nz-form-item nz-row>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="intro">
        {{l('BookListIntro')}}
      </nz-form-label>
      <nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
        <!--  控件位置 -->
        <textarea nz-input name="intro" #intro="ngModel" [(ngModel)]="entity.intro"
          [placeholder]="l('BookListIntroInputDesc')" nzAutosize maxlength='200' minlength='10'></textarea>

        <!-- 校验 -->
        <nz-form-explain *ngIf="intro.control.dirty
                                                 &&intro.control.errors">
          <ng-container *ngIf="intro.control.hasError('maxlength')">{{l('MaxLength')+200}}</ng-container>
          <ng-container *ngIf="intro.control.hasError('minlength')">{{l('MinLength')+10}}</ng-container>
        </nz-form-explain>

      </nz-form-control>

    </nz-form-item>
    <!--简介 : Intro 的控件范围结束=END= -->
    <!-- BookListAndBooks : BookListAndBooks 的控件范围=Start= -->
    <nz-form-item nz-row>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="bookListAndBooks">
        {{l('BookListAndBooks')}}
      </nz-form-label>
      <nz-form-control nz-col [nzSm]="14" [nzXs]="24">
        <!--  控件位置 -->
        <app-book-list-select name="book" [booksSourceData]="books" (selectedDataChange)="bookSelectChange($event)">
        </app-book-list-select>
      </nz-form-control>

    </nz-form-item>
    <!--BookListAndBooks : BookListAndBooks 的控件范围结束=END= -->

  </fieldset>
  <!-- 模态框底部 -->
  <div class="modal-footer">
    <button nz-button [nzType]="'default'" type="button" (click)="close()" [disabled]="saving">
      <i class="iconfont icon-close-circle"></i> {{l("Cancel")}}
    </button>
    <button nz-button [nzType]="'primary'" type="submit" [disabled]="!validateForm.form.valid|| saving"
      [nzLoading]="saving">
      <i class="iconfont icon-save" *ngIf="!saving"></i> {{l("Save")}}
    </button>
  </div>
</form>
